<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
<title>图片轮换</title>
	<link rel="stylesheet" href="css/scroll.css">

</head>

<body>
<div class="scroll">
	<div id="num">
		<a href="#" onclick="changePic(this)">1</a>
		<a href="#" onclick="changePic(this)">2</a>
		<a href="#" onclick="changePic(this)">3</a>
		<a href="#" onclick="changePic(this)">4</a>
		<a href="#" onclick="changePic(this)">5</a>
	</div>
	<img src="images/1.gif" alt="图片" id="photo"/>
</div>
<script type="text/javascript">
	var i=1;
	function changePic(e){
		var num=parseInt(e.innerHTML);
		switch(num){
			case 1:
			case 2:
			case 5:
			document.getElementById("photo").setAttribute("src","images/"+num+".gif");
			break;
			default:
			document.getElementById("photo").setAttribute("src","images/"+num+".jpg");
		}
	}
	function autoChangePic(){
		var pictures=["images/1.gif","images/2.gif","images/3.jpg","images/4.jpg","images/5.gif"];
		document.getElementById("photo").setAttribute("src",pictures[i++]);
		if(i==5){
			i=0;
		}
	}
	setInterval("autoChangePic()",2000);
</script>
</body>
</html>
